import { COLUMN_WIDTH, createCommonPage } from '@/utils/service.js'
import { dateFormat } from '@/utils/date'

export const createForm = () => ({
  desc: true,
  orderField: 'createTime',
  keyword: '',
  state: '',
  startTime: '',
  endTime: '',
  timeType: '',
  ...createCommonPage(),
})

export const createColumns = (vm) => [
  {
    title: '序号',
    key: 'id',
    align: 'center',
    width: 80,
    render(h, params) {
      return <div>{(vm.formData.pageNo - 1) * vm.formData.pageSize + params.index + 1}</div>
    },
  },
  {
    title: '主题名称',
    align: 'center',
    render(h, params) {
      if (!vm.hasPermission('theme/effect/evaluate')) {
        return (
          <span class="ellipsis" title={params.row.themeName}>
            {params.row.themeName}
          </span>
        )
      }

      return (
        <router-link
          to={{ name: 'themeEffectAssess', query: { id: params.row.id } }}
          class="a-normalize ellipsis"
          title={params.row.themeName}
        >
          {params.row.themeName}
        </router-link>
      )
    },
  },
  {
    title: '建立时间',
    align: 'center',
    render(h, params) {
      return <div>{dateFormat(params.row.createTime || '', 'YYYY.MM.DD HH:mm:ss')}</div>
    },
  },
  {
    title: '主题状态',
    align: 'center',
    render(h, params) {
      return h(
        'span',
        { class: 'theme-state--' + (params.row.state && params.row.state.key) },
        (params.row.state && params.row.state.value) || '',
      )
    },
  },
  {
    title: '操作',
    align: 'center',
    render(h, params) {
      const { state } = params.row
      const state_key = (state && state.key) || ''
      // console.log('state_key', state_key)
      return (
        <div>
          <icon-button
            icon="edit_active"
            title="编辑"
            class="ml14"
            activated={false}
            disabled={['COMPUTING', 'FINISH'].includes(state_key)}
            nativeOnClick={() => vm.handleTableRowEdit(params.row)}
          ></icon-button>
          <poptip confirm transfer title="确定删除?" on-on-ok={() => vm.handleTableRowDelete(params.row)}>
            <icon-button
              icon="delete_active"
              title="删除"
              class="ml14"
              width="26"
              height="26"
              style="vertical-align: sub"
              activated={false}
            ></icon-button>
          </poptip>
        </div>
      )
    },
  },
]
